<template>
    <el-tabs v-model="activeTag">
        <el-tab-pane label="修改部门" name="departmentUpdateTAG">
            <el-form ref="addDepartmentRef" :model="departmentUpdate" :rules="departmentRules" label-width="96px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="上级部门" prop="parentId">
                            <treeselect v-model="departmentUpdate.parentId" :options="departmentTree" placeholder="请选择归属部门" :disabled="checkDepartmentIsDisabled"
                                :normalizer="normalizer" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门名称" prop="companyName">
                            <el-input v-model="departmentUpdate.companyName" placeholder="请输入部门名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="负责人" prop="leader">
                            <el-input v-model="departmentUpdate.leader" placeholder="请输入负责人姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="departmentUpdate.phone" placeholder="请输入负责人联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系邮箱" prop="email">
                            <el-input v-model="departmentUpdate.email" placeholder="请输入负责人邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门排序" prop="sort">
                            <el-input-number v-model="departmentUpdate.sort" controls-position="right" :min="1" :max="99" style="width:100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="省市区" prop="pcdCode">
                            <el-cascader v-model="departmentUpdate.pcdCode" :props="defaultProps" style="width:100%"
                                :options="$store.getters['common/GET_ADDRESS_TREE']"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="启用状态" prop="isEnable">
                            <el-radio-group v-model="departmentUpdate.isEnable">
                                <el-radio :label="true">启用</el-radio>
                                <el-radio :label="false">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="部门地址" prop="address">
                            <el-input v-model="departmentUpdate.address"
                                placeholder="请输入企业详细地址,如:XX路XX大厦XX座XX栋XX层XX室"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    components: { Treeselect },
    props: {
        departmentUpdate: {
            type: Object,
            required: true
        },
        departmentRules:{
            type: Object,
            required: true
        },
        departmentTree: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            activeTag: "departmentUpdateTAG",
            defaultProps: {
                children: 'childList',
                label: 'addressName',
                value: 'postCode'
            },
        }
    },
    methods: {
        normalizer(node) {
            return {
                id: node.companyId,
                label: node.companyName,
                children: node.child,
            }
        },
        validate(){
            let checkResult = true;
            this.$refs.addDepartmentRef.validate(valid=>{
                this.departmentUpdate.provinceCode = this.departmentUpdate.pcdCode[0];
                this.departmentUpdate.cityCode = this.departmentUpdate.pcdCode[1];
                this.departmentUpdate.districtCode = this.departmentUpdate.pcdCode[2];
                checkResult = valid;
                if(!valid){
                    return false;
                }
            })
            return checkResult
        }
    },
    computed:{
        checkDepartmentIsDisabled(){
            return this.departmentUpdate.parentId === this.departmentUpdate.companyId;
        }
    }
}
</script>

<style scoped lang="scss"></style>